<template>
  <div id="app">
    <div class="box">
      <div class="title_box">
        <div class="back"><img src="222.png" alt="" /></div>
        <div class="title">任 务</div>
      </div>
      <div class="card">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">归属账号</div>
            <div class="mess3">{{ homeAccount | phoneFilter }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">交易所</div>
            <div class="mess3">{{ exchange }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">{{ varietyCode }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种名称</div>
            <div class="mess3" style="color: #fe0030">{{ varietyName }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #4b8bff">{{ strategyName }}</div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ strategyCycle }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ taskStatus }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓方式</div>
            <div class="mess5">{{ openingMethod }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">交易网关</div>
            <div class="mess5">{{ transactionGateway }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">创建时间</div>
            <div class="mess5">{{ creationTime }}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">归属账号</div>
            <div class="mess3">{{ homeAccount | phoneFilter }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">交易所</div>
            <div class="mess3">{{ exchange }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">{{ varietyCode }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种名称</div>
            <div class="mess3" style="color: #fe0030">{{ varietyName }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #4b8bff">{{ strategyName }}</div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ strategyCycle }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ taskStatus }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓方式</div>
            <div class="mess5">{{ openingMethod }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">交易网关</div>
            <div class="mess5">{{ transactionGateway }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">创建时间</div>
            <div class="mess5">{{ creationTime }}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">归属账号</div>
            <div class="mess3">{{ homeAccount | phoneFilter }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">交易所</div>
            <div class="mess3">{{ exchange }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">{{ varietyCode }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种名称</div>
            <div class="mess3" style="color: #fe0030">{{ varietyName }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #4b8bff">{{ strategyName }}</div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ strategyCycle }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ taskStatus }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓方式</div>
            <div class="mess5">{{ openingMethod }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">交易网关</div>
            <div class="mess5">{{ transactionGateway }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">创建时间</div>
            <div class="mess5">{{ creationTime }}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">归属账号</div>
            <div class="mess3">{{ homeAccount | phoneFilter }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">交易所</div>
            <div class="mess3">{{ exchange }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">{{ varietyCode }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种名称</div>
            <div class="mess3" style="color: #fe0030">{{ varietyName }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #4b8bff">{{ strategyName }}</div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ strategyCycle }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ taskStatus }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓方式</div>
            <div class="mess5">{{ openingMethod }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">交易网关</div>
            <div class="mess5">{{ transactionGateway }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">创建时间</div>
            <div class="mess5">{{ creationTime }}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">归属账号</div>
            <div class="mess3">{{ homeAccount | phoneFilter }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">交易所</div>
            <div class="mess3">{{ exchange }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种代码</div>
            <div class="mess3" style="color: #fe0030">{{ varietyCode }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">品种名称</div>
            <div class="mess3" style="color: #fe0030">{{ varietyName }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">策略名称</div>
            <div class="mess3" style="color: #4b8bff">{{ strategyName }}</div>
          </div>
        </div>
        <div class="RightBox">
          <div class="mess1">
            <div class="mess4">策略周期</div>
            <div class="mess5">{{ strategyCycle }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">任务状态</div>
            <div class="mess5">{{ taskStatus }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">开仓方式</div>
            <div class="mess5">{{ openingMethod }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">交易网关</div>
            <div class="mess5">{{ transactionGateway }}</div>
          </div>
          <div class="mess1">
            <div class="mess4">创建时间</div>
            <div class="mess5">{{ creationTime }}</div>
          </div>
        </div>
      </div>
      <div class="shadow"></div>
    </div>
    <div class="previousPage">
      <img class="page" src="上一页.png" alt="" />
    </div>
    <div class="record">
      <div style="margin-right: 10px">总记录数***</div>
      <div>当前记录***</div>
    </div>
    <div class="nextPage"><img class="page" src="下一页.png" alt="" /></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      homeAccount: '15030369800',
      exchange: '上海',
      varietyCode: '603989',
      varietyName: '艾华集团',
      strategyName: '无算法',
      strategyCycle: '日',
      taskStatus: '进行',
      openingMethod: '手动开仓',
      transactionGateway: '仿真',
      creationTime: getLocalTime(1619674255)
    }
  }
}
</script>
